<template>
  <div class="search">
    <div class="top">
      <van-search
        class="searchBox"
        shape="round"
        placeholder="请输入搜索关键词"
        @keypress="enterSearch"
        type="search"
        v-model="ipt"
         @update:model-value="debounce"
      />
     
      <router-link to="/"><p>取消</p></router-link>
    </div>

    <van-list finished-text="没有更多了" class="resulitList" v-show="show">
      <van-cell v-for="item in showList" :key="item" @click="jumpToGoods(item.id)">
        <div class="list">
          <div class="logo">
            <img src="../../assets/search/搜索.png" alt="" />
          </div>
          <p>{{ item.name }}</p>
        </div>
      </van-cell>
    </van-list>

  
        <defaultVue  @demo="historySearch" v-show="vueName=='defaultVue'"/>
        <searchResultVue v-show="vueName=='searchResultVue'"/>
  </div>
</template>

<script setup>
import defaultVue from "../search/components/default.vue";
import searchResultVue from "../search/components/searchResult.vue";

import { ref, reactive, watch ,toRaw} from "vue";
import { getData } from "../../utils/request.js";
import { useStore } from "vuex";
import { useRoute, useRouter, onBeforeRouteUpdate } from "vue-router";
import { Toast } from "vant";
const route = useRoute();
const router = useRouter();
let vueName = ref("defaultVue");

const store = useStore();
const ipt = ref("");
const show = ref(false);
const showList = ref([]);
const resultList = ref([]);

const enterSearch = async (event) => {
 
  if (event.keyCode == 13) {
    show.value=false
    vueName.value='searchResultVue'
    saveHistory(event.target.value);
    getsearch(event.target.value);
  }

};
const historySearch=(value)=>{
  show.value=false
  vueName.value='searchResultVue'
   getsearch(value);
}

const jumpToGoods = (id) => {
 show.value=false
   router.push(`/goodsDetail/${id}`);
};
//存放搜索历史
const saveHistory = (value) => {
  store.commit("search/setHistory", value);
};
//请求数据并跳转
const getsearch = async (value) => {
  Toast.loading({
    message: "正在请求数据，请稍后...",
    forbidClick: true,
    duration: 0,
  });
  let result = await search(value);
  if (result) {
    Toast.clear();
  }
};

//防抖函数调用请求
function debounce(e) {
  // 参数判断
show.value=true
  let timer = null;
  clearTimeout(timer);
  timer = setTimeout(() => {
    search(e);
    //hanlde没有执行
  }, 1000);
}

//请求数据用
const search = async (e) => {
  console.log(e);
  let result;
  const data = {
    project_id: 234,
    name: e,
  };

  if (data.name) {
    showList.value = [];
    store.commit('search/clearResultList')
    try {
      result = await getData(`/goodsSearch`, data);
    } catch (error) {}
    if (result.status == 200) {
      // searchList.value = result.data.result.rows;

      let data = result.data.result.rows;
        showList.value=result.data.result.rows.slice(0,4)
      let resultList1 = result.data.result.rows;
      resultList.value=JSON.parse(JSON.stringify(resultList1))
      resultList.value.forEach((ele)=>{
        let res;
      for (let j = 0; j < 100; j++) {
        res = Math.random() * 100 + 1;
        if (res >= 80) {
         ele.assess = Math.floor(res);
          break;
        }
      }
      ele.assessNum = Math.floor(Math.random() * 10 + 1);
      ele.s_goods_photos=ele.s_goods_photos[0].path
      })
       
     store.commit('search/setResultList',resultList.value)
  
      return resultList.value;
    }
  }
};
</script>

<style lang="scss" scoped>
.search {
  width: 100%;
  height: 100vh;
  background-color: white;
  .top {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    p {
      color: #333333;
      font-size: 4.2vw;
    }
  }
  .searchBox {
    width: 85vw !important;
  }
  .resulitList {
    width: 100%;
    position: absolute;
    top: 6.95vh;

    .list {
      display: flex !important;
      height: 5vh;
      align-items: center;
      .logo {
        width: 4.6vw;
        height: 4.6vw;

        img {
          width: 100%;
          height: 100%;
        }
      }
      p {
        text-align: left;
        width: 100%;
        margin: 0;
        margin-left: 3vw;
      }
    }
  }
}
</style>
